{% extends "base.html" %}
{% block title %}Case #{{ case.id }} — LegalEase AI{% endblock %}

{% block content %}
<div class="container">

    <!-- Back -->
    <div style="margin-bottom:1.5rem;">
        <a href="/client/dashboard" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
    </div>

    <!-- Case Header -->
    <div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;">
        <div>
            <h1 class="page-title" style="margin-bottom:0.25rem;"><i class="fas fa-folder-open"></i> Case #{{ case.id }}</h1>
            <p class="page-subtitle" style="margin:0;">{{ case.category or 'Unclassified' }} &nbsp;·&nbsp; Submitted {{ case.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
        </div>
        <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;">
            <span style="background:rgba(29,78,216,0.12);color:var(--accent);border:1px solid rgba(29,78,216,0.25);padding:0.35rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;">
                <i class="fas fa-gavel"></i> {{ case.category or 'Unclassified' }}
            </span>
            {% if case.status in ('reviewed','filed','resolved') %}
            <span style="background:rgba(14,122,67,0.12);color:var(--success);border:1px solid rgba(14,122,67,0.25);padding:0.35rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;">
                <i class="fas fa-check-circle"></i> {{ case.status|title }}
            </span>
            {% else %}
            <span style="background:rgba(150,102,10,0.1);color:var(--warning);border:1px solid rgba(150,102,10,0.25);padding:0.35rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;">
                <i class="fas fa-hourglass-half"></i> Under Review
            </span>
            {% endif %}
        </div>
    </div>

    <!-- Description + AI Analysis -->
    <div class="grid-2" style="margin-bottom:1.5rem;">

        <!-- Client Description -->
        <div class="card">
            <div class="card-header"><i class="fas fa-align-left"></i> Your Case Description</div>
            <div class="card-body">
                <div style="background:#F4F6F9;border:1px solid var(--border);border-radius:10px;padding:1.25rem;line-height:1.9;font-size:0.92rem;color:var(--text);white-space:pre-wrap;word-break:break-word;">{{ case.description }}</div>
            </div>
        </div>

        <!-- AI Results -->
        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div class="card">
                <div class="card-header"><i class="fas fa-robot"></i> AI Case Summary</div>
                <div class="card-body">
                    <p style="line-height:1.8;font-size:0.9rem;color:var(--text);">{{ case.summary or 'AI summary not available yet.' }}</p>
                </div>
            </div>
            <div class="card">
                <div class="card-header"><i class="fas fa-balance-scale"></i> AI Legal Guidance</div>
                <div class="card-body" style="padding:0.5rem 0;">
                    {% if case.legal_guidance %}
                    {% for line in case.legal_guidance.split('\n') %}
                    {% if line.strip() %}
                    <div style="display:flex;gap:0.75rem;align-items:flex-start;padding:0.6rem 1.25rem;border-bottom:1px solid #E5E9F0;">
                        <i class="fas fa-chevron-right" style="color:var(--accent);margin-top:0.3rem;flex-shrink:0;font-size:0.72rem;"></i>
                        <span style="font-size:0.88rem;color:var(--text);line-height:1.6;">{{ line.strip().lstrip('•-').strip() }}</span>
                    </div>
                    {% endif %}
                    {% endfor %}
                    {% else %}
                    <div style="padding:1rem 1.25rem;color:var(--text-muted);font-size:0.88rem;">No legal guidance available.</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Appointments for this case -->
    {% if appointments %}
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-header"><i class="fas fa-calendar-alt"></i> Appointments</div>
        <div class="card-body" style="padding:0;">
            <table style="width:100%;border-collapse:collapse;">
                <thead>
                    <tr style="background:#F4F6F9;">
                        <th style="padding:0.8rem 1.25rem;text-align:left;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);">Date</th>
                        <th style="padding:0.8rem 1.25rem;text-align:left;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);">Time</th>
                        <th style="padding:0.8rem 1.25rem;text-align:left;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);">Status</th>
                        <th style="padding:0.8rem 1.25rem;text-align:left;font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);">Notes</th>
                    </tr>
                </thead>
                <tbody>
                {% for appt in appointments %}
                <tr style="border-bottom:1px solid #E5E9F0;">
                    <td style="padding:0.85rem 1.25rem;font-weight:600;font-size:0.88rem;color:var(--text);">{{ appt.appointment_date }}</td>
                    <td style="padding:0.85rem 1.25rem;font-size:0.85rem;color:var(--accent);"><i class="fas fa-clock"></i> {{ appt.appointment_time }}</td>
                    <td style="padding:0.85rem 1.25rem;">
                        {% if appt.status == 'confirmed' %}
                        <span style="background:rgba(14,122,67,0.12);color:var(--success);border:1px solid rgba(14,122,67,0.25);padding:0.22rem 0.7rem;border-radius:20px;font-size:0.76rem;font-weight:600;"><i class="fas fa-check-circle"></i> Confirmed</span>
                        {% elif appt.status == 'cancelled' %}
                        <span style="background:rgba(180,35,24,0.1);color:var(--danger);border:1px solid rgba(180,35,24,0.2);padding:0.22rem 0.7rem;border-radius:20px;font-size:0.76rem;font-weight:600;"><i class="fas fa-times-circle"></i> Cancelled</span>
                        {% else %}
                        <span style="background:rgba(150,102,10,0.1);color:var(--warning);border:1px solid rgba(150,102,10,0.25);padding:0.22rem 0.7rem;border-radius:20px;font-size:0.76rem;font-weight:600;"><i class="fas fa-hourglass-half"></i> Pending — Awaiting lawyer</span>
                        {% endif %}
                    </td>
                    <td style="padding:0.85rem 1.25rem;font-size:0.82rem;color:var(--text-muted);">{{ appt.notes or '—' }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- ── Hearings ──────────────────────────────────────────── -->
    {% if hearings %}
    <div class="card" style="margin-bottom:1.5rem;border:1px solid rgba(29,78,216,0.25);">
        <div class="card-header" style="color:#1D4ED8;">
            <i class="fas fa-video"></i> Virtual Hearings for This Case
        </div>
        <div class="card-body" style="padding:0;">
            {% for hearing in hearings %}
            <div style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #E5E9F0;flex-wrap:wrap;gap:0.75rem;">
                <div style="display:flex;align-items:center;gap:1rem;">
                    <div style="width:44px;height:44px;background:#1D4ED822;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="fas fa-gavel" style="color:#1D4ED8;font-size:1rem;"></i>
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:0.95rem;color:var(--text);">{{ hearing.scheduled_date }} at {{ hearing.scheduled_time }}</div>
                        <div style="font-size:0.8rem;color:var(--text-muted);">
                            {{ hearing.hearing_type.replace('_',' ').title() }}
                            {% if hearing.judge_name %} · Judge: <strong style="color:var(--text);">{{ hearing.judge_name }}</strong>{% endif %}
                        </div>
                        {% if hearing.zoom_meeting_id %}
                        <div style="font-size:0.76rem;color:var(--text-muted);margin-top:0.1rem;">
                            Meeting ID: <span style="font-family:monospace;color:var(--text);">{{ hearing.zoom_meeting_id }}</span>
                            {% if hearing.zoom_password %}
                            &nbsp;·&nbsp; Password: <span style="font-family:monospace;color:var(--text);font-weight:600;letter-spacing:0.1em;">{{ hearing.zoom_password }}</span>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if hearing.outcome_notes %}
                        <div style="font-size:0.8rem;color:var(--success);margin-top:0.25rem;"><i class="fas fa-check-circle"></i> Outcome: {{ hearing.outcome_notes }}</div>
                        {% endif %}
                    </div>
                </div>
                <div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
                    {% if hearing.status == 'scheduled' %}
                    <span style="background:rgba(29,78,216,0.1);color:var(--accent);border:1px solid rgba(29,78,216,0.2);padding:0.22rem 0.65rem;border-radius:20px;font-size:0.75rem;font-weight:600;">Scheduled</span>
                    {% elif hearing.status == 'completed' %}
                    <span style="background:rgba(14,122,67,0.1);color:var(--success);border:1px solid rgba(14,122,67,0.2);padding:0.22rem 0.65rem;border-radius:20px;font-size:0.75rem;font-weight:600;"><i class="fas fa-check-circle"></i> Completed</span>
                    {% elif hearing.status == 'adjourned' %}
                    <span style="background:rgba(150,102,10,0.1);color:var(--warning);border:1px solid rgba(150,102,10,0.2);padding:0.22rem 0.65rem;border-radius:20px;font-size:0.75rem;font-weight:600;">Adjourned</span>
                    {% endif %}
                    {% if hearing.status in ('scheduled','in_progress') and hearing.zoom_join_url %}
                    <a href="/hearing/{{ hearing.id }}/join" target="_blank"
                        style="background:var(--accent);color:#fff;padding:0.45rem 1.1rem;border-radius:8px;font-size:0.85rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;box-shadow:0 3px 12px rgba(29,78,216,0.35);">
                        <i class="fas fa-video"></i> Join Zoom Hearing
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Documents shared by Lawyer -->
    {% if shared_docs %}
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-header"><i class="fas fa-paperclip"></i> Documents from Your Lawyer</div>
        <div class="card-body" style="padding:0;">
            {% for doc in shared_docs %}
            <div style="display:flex;align-items:center;gap:0.85rem;padding:0.85rem 1.25rem;border-bottom:1px solid #E5E9F0;">
                <div style="width:38px;height:38px;background:rgba(29,78,216,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fas fa-file-alt" style="color:var(--accent);font-size:1rem;"></i>
                </div>
                <div style="flex:1;">
                    <div style="font-weight:600;font-size:0.88rem;color:var(--text);">{{ doc.filename }}</div>
                    <div style="font-size:0.75rem;color:var(--text-muted);">{{ doc.doc_type }} · Uploaded {{ doc.uploaded_at.strftime('%d %b %Y') if doc.uploaded_at else '' }} · {% if doc.file_size_kb %}{{ doc.file_size_kb }} KB{% endif %}</div>
                </div>
                <span style="background:rgba(14,122,67,0.1);color:var(--success);border:1px solid rgba(14,122,67,0.2);padding:0.2rem 0.6rem;border-radius:12px;font-size:0.72rem;font-weight:600;">Shared by Lawyer</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Messaging with Lawyer -->
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-header"><i class="fas fa-comments"></i> Messages with Your Lawyer</div>
        <div class="card-body" style="padding:0;">
            <!-- Message thread -->
            <div id="msg-thread" style="max-height:320px;overflow-y:auto;padding:1rem 1.25rem;">
                {% if messages %}
                {% for msg in messages %}
                <div style="margin-bottom:1rem;display:flex;flex-direction:column;align-items:{% if msg.sender_role == 'client' %}flex-end{% else %}flex-start{% endif %};">
                    <div style="max-width:75%;background:{% if msg.sender_role == 'client' %}rgba(29,78,216,0.12){% else %}#E5E9F0{% endif %};border:1px solid {% if msg.sender_role == 'client' %}rgba(29,78,216,0.25){% else %}var(--border){% endif %};border-radius:14px;padding:0.7rem 1rem;">
                        <div style="font-size:0.88rem;color:var(--text);line-height:1.6;">{{ msg.content }}</div>
                    </div>
                    <div style="font-size:0.72rem;color:var(--text-muted);margin-top:0.25rem;padding:0 0.3rem;">
                        {{ msg.sender_role|title }} · {{ msg.sent_at.strftime('%d %b, %H:%M') if msg.sent_at else '' }}
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div style="text-align:center;color:var(--text-muted);font-size:0.88rem;padding:1.5rem 0;">
                    <i class="fas fa-comment-slash" style="font-size:1.5rem;display:block;margin-bottom:0.5rem;opacity:0.2;"></i>
                    No messages yet. Send a message to your lawyer below.
                </div>
                {% endif %}
            </div>
            <!-- Send message -->
            <div style="border-top:1px solid var(--border);padding:0.85rem 1.25rem;">
                <form method="POST" action="/client/cases/{{ case.id }}/message" style="display:flex;gap:0.6rem;">
                    <input type="text" name="content" placeholder="Type a message to your lawyer..." required
                        style="flex:1;background:#F4F6F9;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:0.55rem 0.85rem;font-size:0.88rem;outline:none;">
                    <button type="submit" style="background:rgba(29,78,216,0.15);color:var(--accent);border:1px solid rgba(29,78,216,0.3);padding:0.55rem 1rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.88rem;">
                        <i class="fas fa-paper-plane"></i> Send
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Recommended Lawyers -->
    {% if recommendations %}
    <div class="card">
        <div class="card-header"><i class="fas fa-user-tie"></i> Recommended Lawyers</div>
        <div class="card-body">
            <div class="grid-2">
                {% for rec in recommendations %}
                {% set lawyer = rec.lawyer %}
                <div class="lawyer-card">
                    <div class="lawyer-name">{{ lawyer.name }}</div>
                    <div class="lawyer-firm">{{ lawyer.law_firm_name }}</div>
                    <div class="lawyer-meta">
                        <span><i class="fas fa-map-marker-alt"></i> {{ lawyer.city }}</span>
                        <span><i class="fas fa-briefcase"></i> {{ lawyer.experience_years }} yrs</span>
                        <span><i class="fas fa-star" style="color:var(--accent);"></i> {{ lawyer.rating }}</span>
                        <span><i class="fas fa-money-bill"></i> PKR {{ "{:,.0f}".format(lawyer.consultation_fee_pkr) }}</span>
                    </div>
                    <div style="margin-top:0.8rem;">
                        <a href="/client/book-appointment/{{ lawyer.id }}?case_id={{ case.id }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-calendar-plus"></i> Book Appointment
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

</div>
<script>
// Auto-scroll messages to bottom
const thread = document.getElementById('msg-thread');
if(thread) thread.scrollTop = thread.scrollHeight;
</script>
{% endblock %}